<template>
	<view class="housekeeper">
		<view class="info">
			<view class="image">
				<image class="img" :src="housekeeper.image" mode="scaleToFill"></image>
			</view>
			<view class="msg">
				<view class="name-price">
					<text class="name">{{housekeeper.name}}</text>
					<text class="price">{{housekeeper.price}}</text>
				</view>
				
				<view class="status">
					<text class="text" v-for="(item,index) in housekeeper.status" :key="index">{{item}}</text>
				</view>
				<view class="text">{{housekeeper.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			housekeeper:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.housekeeper{
	width: 100%;
	height: 240rpx;
	.info{
		display: flex;
		align-items: center;
		padding: 24rpx 36rpx;
		.image{
			width: 160rpx;
			height: 176rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.msg{
			flex: 1;
			height: 176rpx;
			margin-left:20rpx ;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.text{
				font-size: 22rpx;
				color: #666;
			}
			.status .text{
				display: inline-block;
				padding: 0 20rpx;
				line-height: 46rpx;
				border-radius: 28rpx ;
				border: 1rpx solid #3F51B5 ;
				margin-right: 18rpx;
				font-size: 20rpx;
				color: #3F51B5;
				box-sizing: border-box;
			}
			.name-price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					color: #666;
					font-size:24rpx ;
				}
			}
		}
	}
	
	
}
.company::before{
	content: '';
	display: none;
}
</style>
